<template>
  <swiper :options="swiperOption" ref="mySwiper">
<!--    <swiper-slide>-->
<!--    </swiper-slide>-->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
name: "swiper-view",
  data () {
    return {
      num: 1,
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        autoHeight: true,
          height:window.innerHeight,
        // height:
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },
methods:{
  getParams(){
    this.num=this.$route.params.num;
  },
  toslide(){
    this.$refs.mySwiper.swiper.slideTo(this.num);
  },
  // 其他页面跳转指定slides
  delay () {
    // 值得注意的是这里在setTimeout函数如果使用到了this，必须在函数外定义一个变量来暂存this。如果不需要使用this，则不用定义。
    const self = this
    setTimeout(function () {
      console.log('延时了执行')
      self.$refs.mySwiper.swiper.slideTo(self.num, 1000, true)
    }, 500)
  }
},
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  created() {
    this.num=this.$route.params.num;
    this.delay(this.num);
  }
}
</script>

<style scoped>
html, body {
  position: relative;
  height: 100%;
}
*{
  background: #ffffff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
/*.introduction_block{*/
/*  width: 1200px;*/
/*  height: 300px;*/
/*  padding: 0;*/
/*  position: relative;*/
/*}*/
/*.introduction_block .el-image{*/
/*  width: 740px;*/
/*  height: 300px;*/
/*}*/
</style>